import React, { useEffect, useState } from 'react'
import Header from '../index'
import '../../assets/style/common/home.scss'
import img1 from "../../assets/images/banner.png"
import img2 from "../../assets/images/mengban165@2x.png"
import http from '../../apis'
import { Carousel } from 'antd';


const contentStyle = {
  height: '160px',
  color: '#fff',
  lineHeight: '160px',
  textAlign: 'center',
  background: '#364d79',
};

export default function Home() {
  const lists = [
    { id: 1, imgs: 122, },
    { id: 2, imgs: 1223, },
    { id: 3, imgs: 1224, },
    { id: 4, imgs: 125, },
  ]
  const [list, setList] = useState(lists)

  //获取首页靶场数据
  const getDataRange=()=>{
      http.rang.findRangAll({pageIndex:1,pageSize:15})
      .then((res)=>{
        console.log(res);
        setList(res.data.data.data)
      })
  }

  useEffect(()=>{
    getDataRange()
  },[])
  return (
    <div>

      <div className='swiper'>
        <Carousel autoplay>
          <div>
            <img src={img1} alt="" />
          </div>
          <div>
            <img src={img1} alt="" />
          </div>
          <div>
            <img src={img1} alt="" />
          </div>
        </Carousel>

      </div>
      <div className='context' >
        {
          list.map(item => {
            return <div className='experiment' key={item.id}>
              <img src={item.image} alt="" className='exp_class' />
              <div className='exp_name'>
                <div className='name'>{item.tname}</div>
                <div className='type'>
                  <div className='ty_title'>
                    所属类型
                  </div>
                  <div>
                    <img src={img2} alt="" className='fa' />
                    <span className='people'>访问人数</span>
                  </div>
                </div>
              </div>

            </div>
          })
        }
      </div>

      <div className='more'>
        <button className='btnMore'> 加载更多</button>
      </div>
    </div>
  )
}
